<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js交互效果之手风琴</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.wrap{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background-color: #333;
			}
			.card{
				background-size: auto 100%;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 50px;
				color: #fff;
				flex: 0.5;
				cursor: pointer;
				height: 80vh;
				position: relative;
				margin: 10px;
				transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9)
			}
			.card h3{
				font-size: 20px;
				position: absolute;
				bottom: 20px;
				left: 20px;
				transition: opacity 0s ease-in 0s;
			}
			.active{
				flex: 5;
			}
			.card.active{
				opacity: 1;
				transition: opacity 0.3 ease-in 0.4s;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="card" style="background: url(img/1.jpg);">
				<h3>1</h3>
			</div>
			<div class="card" style="background: url(img/2.jpg);">
				<h3>2</h3>
			</div>
			<div class="card" style="background: url(img/3.jpg);">
				<h3>3</h3>
			</div>
			<div class="card" style="background: url(img/4.jpg);">
				<h3>4</h3>
			</div>
			<div class="card" style="background: url(img/5.jpg);">
				<h3>5</h3>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.querySelector('.wrap');
			var cards = wrap.querySelectorAll('.card');
			console.log(wrap);
			console.log(cards);
			for (var i = 0; i < cards.length; i++) {
				cards[i].addEventListener('mousemove',function(){
					removeActive();
					this.className = "card active"
				})
			}
			function removeActive(){
				for (var i = 0; i < cards.length; i++) {
					cards[i].className = "card";
				}
			}
		</script>
	</body>
</html>
